<template>
	<div>
		<el-form ref="form" :model="form" label-width="80px">
		  <el-form-item label="名称:">
		    <el-input v-model="form.name"></el-input>
		  </el-form-item>
		  <el-form-item label="标题:">
		    <el-input v-model="form.title"></el-input>
		  </el-form-item>
		  <el-form-item label="活动时间:">
		    <div class="block">
		        <el-date-picker
		          v-model="form.dateTime"
		          type="datetimerange"
		          align="right"
		          start-placeholder="开始日期"
		          end-placeholder="结束日期"
				  format="yyyy 年 MM 月 dd 日"
				                value-format="yyyy-MM-dd"
		          :default-time="['12:00:00', '08:00:00']">
		        </el-date-picker>
			</div>	
		  </el-form-item>
		  <el-form-item label="背景图片:">
		    <el-upload
		      class="avatar-uploader"
			  ref="upload"
		      :action='url+"/uploadFile"'
		      :show-file-list="false"
			  accept=".png"
		      :on-success="handleAvatarSuccess"
		      :before-upload="beforeAvatarUpload">
		      <img v-if="form.img" :src="form.img" class="avatar">
		      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
		    </el-upload>
		  </el-form-item>
		  <el-form-item label="备注:">
		    <el-input type="textarea" v-model="form.remark"></el-input>
		  </el-form-item>
		</el-form>
	</div>
</template>

<script>
	import api from '@/api/system/page.js'
	export default {
	    data() {
	      return {
			  url:process.env.VUE_APP_BASE_API,
			imgUrl:"",
	        form: {
			  id: '',
	          name: '',
	          title: '',
	          dateTime: [],
	          startTime: '',
			  img:'',
			  endTime: '',
			  remark:''
	        },
			imageUrl:''
	      }
	    },
		props:["pageId"],
		created() {
			this.form.id=''
			this.form.name=''
			this.form.title=''
			this.form.dateTime=[]
			this.form.startTime=''
			this.form.img=''
			this.form.endTime=''
			this.form.remark=''
			this.show()
		},
	    methods: {
		  show(){
			  var data = {
				  id:this.pageId
			  }
			api.getById(data).then(res=>{
				this.form=res.data
				let tmpArr = []
				tmpArr.push(new Date(res.data.startTime))
				tmpArr.push(new Date(res.data.endTime))
				// console.log('转成啥', tmpArr)
				this.form.dateTime = tmpArr
			})  
		  },
		  save(){
			  if(this.form.dateTime){
				  this.form.startTime = this.dataTime(this.form.dateTime[0]);
				   this.form.endTime = this.dataTime(this.form.dateTime[1]); 
			  }
			  this.form.id = this.pageId
			   api.edit(this.form).then(res=>{
				   if(res.code==200){
					   this.$message.success(res.message);
				   }else{
					   this.$message.error(res.message);
				   }
			   })
		  },
		  dataTime(date){
			  return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
		  },
		  handleAvatarSuccess(res, file) {
				this.form.img = process.env.VUE_APP_BASE_API+"/static/pageImg/"+res
		  },
	      beforeAvatarUpload(file) {
	        const isLt2M = file.size / 1024 / 1024 < 2;
	        
	        if (!isLt2M) {
	          this.$message.error('上传头像图片大小不能超过 2MB!');
	        }
	        return  isLt2M;
	      }
	    },
	}
</script>

<style>
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 128px;
	    height: 128px;
	    line-height: 128px;
	    text-align: center;
	  }
	  .avatar {
	    width: 128px;
	    height: 128px;
	    display: block;
	  }
</style>
